<template>
  <div id="mapEcharts">
    <div class="map-imgs">
      <VEcharts
        autoresize
        :options="opts"
        style="width: 100%; height: 100%"
        @click="townClick"
      />
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
// 深度克隆
// const Data = {
//   '齐贤': [120.49476, 30.08189],
//   '马鞍': [120.589607, 30.14575]
//   // '安昌':[]
// };
export default {
  name: 'MapEcharts',
  components: {
    VEcharts
  },
  props: {
    // myStyle: {
    //   type: Number,
    //   default: 1
    // },
    orGanize: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    opts() {
      return {
        legend: {
          show: false
        },
        selectedMode: 'single',
        series: [
          {
            name: '齐贤街道',
            type: 'map',
            // type: 'custom',
            // coordinateSystem: 'geo',
            geoIndex: 1,
            mapType: 'qixian',
            roam: 'true', // 拖拽
            aspectScale: 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
            zoom: 1.1, // 地图大小
            itemStyle: {
              // 地图样式
              normal: {
                borderColor: 'rgba(0,0,0,0.20)',
                borderWidth: 2,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#1fd2ff' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1fd2ff' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: 'rgba(128, 217, 248, 1)',
                boxShadow: '9px 9px 25px 0px rgba(0,0,0,0.20)'
                // shadowColor: "#0169d4",
                // shadowOffsetX: -2,
                // shadowOffsetY: 2,
                // shadowBlur: 20
              }
            },
            emphasis: {
              // 鼠标移入动态的时候显示的默认样式
              itemStyle: {
                // areaColor: _this.mapActiveItembg,
                // borderColor: '#404a59',
                borderWidth: 0.1,
                shadowColor: 'rgba(0, 0, 0, .6)',
                shadowBlur: 5,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            showLegendSymbol: false, // 省份对应位子的红点
            label: {
              normal: {
                show: true,
                // 'color': _this.mapFontbg,
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
                formatter: '{b}'
              },
              emphasis: {
                show: true,
                color: '#fff',
                // 'color': _this.mapFontbg,
                fontSize: 22,
                fontWeight: 600,
                formatter: '{b}'
              }
            },
            grid: {},
            layoutCenter: ['49%', '47.0%'],
            layoutSize: '108%'
          }
        ]
      };
    }
  },
  methods: {
    townClick(e) {
      this.$emit('into-town', e);
    }
  }
};
</script>

<style scoped>
#mapEcharts {
  width: 100%;
  height: 100%;
  position: relative;
  top: 1rem;
}
.map-imgs {
  height: 100%;
  position: relative;
}

.map-imgs > img {
  width: 9rem;
  height: 9rem;
}
.jinglingzhen {
  position: absolute;
  bottom: 20%;
  left: 10%;
}
</style>
